<template>
  <div>
    <el-table :data="dataList" style="width: 100%" row-key="id" border>
    <!-- <el-table-column prop="id" label="序号" width="80" /> -->
			<el-table-column  label="序号" width="100">
    			<template #default="scope">
					   <span>{{scope.$index+1}}</span>
     			 </template>
   		</el-table-column>
    <el-table-column prop="argName" label="名称" width="100" />
    <el-table-column prop="argDescribe" label="描述" width="400" />
    <el-table-column prop="argValue" label="变量值" width="120" />
    <!-- <el-table-column prop="parentId" label="父节点" width="80" /> -->
		<el-table-column prop="argCode" label="代码" width="120" />
    <el-table-column prop="createTime" label="创建时间" width="200" />
    <el-table-column prop="updateTime" label="更新时间" width="200" />
    <el-table-column fixed="right" label="操作" width="300">
      <template #default="scope">
        <el-button type="primary" @click="addClick(scope.row.id)"  v-hasPerm="['sys:normalArgs:add']">添加</el-button>

        <el-button type="warning" @click="dialogEdit(scope.row)"  v-hasPerm="['sys:normalArgs:update']">编辑</el-button>

        <el-button type="danger" @click="deleteClick(scope.row.id)"  v-hasPerm="['sys:normalArgs:delete']">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 弹窗 -->

  <el-dialog v-model="editVisible" title="积分编辑">
    <el-form :model="pointForm">
      <el-form-item label="名称">
        <el-input v-model="pointForm.argName" autocomplete="off" />
      </el-form-item>

      <el-form-item label="描述">
        <el-input v-model="pointForm.argDescribe" autocomplete="off" />
      </el-form-item>

      <el-form-item label="积分值">
        <el-input v-model="pointForm.argValue" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editVisible = false">取消</el-button>
        <el-button type="primary" @click="editSubmit"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 添加dialog -->
  <el-dialog v-model="addVisible" title="添加积分">
    <el-form :model="pointQuery">
      <el-form-item label="名称">
        <el-input v-model="pointQuery.argName" autocomplete="off" />
      </el-form-item>

      <el-form-item label="描述">
        <el-input v-model="pointQuery.argDescribe" autocomplete="off" />
      </el-form-item>

      <el-form-item label="积分值">
        <el-input v-model="pointQuery.argValue" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addVisible = false">取消</el-button>
        <el-button type="primary" @click="addSubmit"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, reactive } from "vue";

import { getPoint, deleteInfo, addInfo, editInfo } from "../../../api/point";
import { pointInfo, pointquery } from "../../../api/point/type";
import { ElMessageBox, ElMessage } from "element-plus";

//弹窗
const editVisible = ref(false);

const addVisible = ref(false);

const loading = ref(false);

const dataList = ref<pointInfo[]>();

const formData = reactive<pointInfo>({});

const pointForm = reactive<pointInfo>({
  id: 0,
  argName: "",
  argDescribe: "",
  argValue: "",
  parentId: 0,
  createTime: "",
  updateTime: "",
  children: [],
});
const pointQuery = reactive<pointquery>({});
//父节点

/**
 * 删除
 */

async function deleteClick(id: number) {
  await ElMessageBox.confirm("确认删除吗?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(function () {
    deleteInfo(id).then(() => {
      ElMessage.success("删除成功");
      handleData();
    });
  });
}

//弹出编辑弹框

function dialogEdit(row: pointInfo) {
  editVisible.value = true;
  Object.assign(pointForm, row);
}

/**
 * 编辑
 */
function editSubmit() {
  loading.value = true;
  editInfo(pointForm)
    .then(() => {
      ElMessage.success("修改用户成功");
      closeDialog();
      handleData();
    })
    .finally(() => (loading.value = false));
}

/**
 * 添加弹框
 */
function addClick(id: number) {
  addVisible.value = true;
  pointQuery.parentId = id;
}

function addSubmit() {
  loading.value = true;
  addInfo(pointQuery)
    .then(() => {
      ElMessage.success("添加用户成功");
      closeDialog();
      handleData();
    })
    .finally(() => (loading.value = false));
}

/**
 * 关闭弹窗
 */

function closeDialog() {
  editVisible.value = false;
  addVisible.value = false;
}

function handleData() {
  loading.value = true;
  getPoint()
    .then(({ data }) => {
      dataList.value = data;
      console.log(11111111);
    })
    .catch((error) => {
      console.error("Error:", error);
    })
    .finally(() => {
      loading.value = false;
    });
}

onMounted(() => {
  handleData();
});
</script>
